<template>
<div id="TARBAR" ref="father">
  <router-link tag="div" v-for="item in tarbar" :key="item.id" :to="item.path" @click_active='change(item.id)'>
    <!-- 通过三元表达式展示icon -->
      <img :src="item.isActive? item.ico_active : item.ico " alt="">
      <p>
        {{item.title}}
      </p>
  </router-link>
  <!-- 例子 -->
  <!-- <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get">点击</el-button> -->
</div>
</template>

<script>
export default {
  data () {
    return {
      tarbar: [
        {
          id: 1,
          isActive: true,
          ico: require('@/assets/images/ICons/Tarbar/Home.png'),
          ico_active: require('@/assets/images/ICons/Tarbar/Home_act.png'),
          title: '首页',
          path: '/Main'
        },
        {
          id: 2,
          isActive: false,
          ico: require('@/assets/images/ICons/Tarbar/Question.png'),
          ico_active: require('@/assets/images/ICons/Tarbar/Question_act.png'),
          title: '提问',
          path: '/Question'
        },
        {
          id: 3,
          isActive: false,
          ico: require('@/assets/images/ICons/Tarbar/Ward.png'),
          ico_active: require('@/assets/images/ICons/Tarbar/Ward_act.png'),
          title: '衣柜',
          path: '/Ward'
        },
        {
          id: 4,
          isActive: false,
          ico: require('@/assets/images/ICons/Tarbar/Me.png'),
          ico_active: require('@/assets/images/ICons/Tarbar/Me_act.png'),
          title: '我的',
          path: '/Me'
        }
      ],
      ACTIVE: true,
      NOTACTIVE: false
    }
  },
  methods: {
    change (e) {

    }
  } 
}
</script>

<style lang='scss'>
#TARBAR {
  display: table;
  width: 100%;
  // height: 3px;
  bottom: 0;
  // padding: 5px 0;
  background: #fff;
  font-family: 微软雅黑;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  color:  #E9BD7A;
  background: rgb(248, 255, 244);
  div {
    width: 25%;
    height: 60px;
    display: table-cell;
    opacity: 0.8;
    // padding-bottom: -20px;
  }
  .router-link-active {
    font-weight: bolder;
    opacity: 1;
    color: rgb(255, 153, 0);
  }
  img {
    height: 20px;
    width: 20px;
    margin-bottom: -13px;
  }
  p {
    margin: 12px 0;
  }
}
</style>
